<template>
	<div class='question-answer'>
		<div
			class="item"
			v-for="(item,i) in course.question"
			:key="i"
		>
			<div
				class="question"
				@click="onclickQuestion(i)"
			>
				<div class="title">{{i+1}}.{{item.title}}</div>
				<Iconfont
					name="icon-arrow-down"
					size="14"
					color="#00493E"
				/>
			</div>
			<div
				:style="{
					height: activeQA.indexOf(i) > -1 ? 'auto' : '0'
				}"
				class="answer"
			>
				{{item.answer}}
			</div>
		</div>
	</div>
</template>

<script>
export default {
  props: {
    course: Object
  },
  data() {
    return {
      activeQA: []
    }
  },
  methods: {
    onclickQuestion(i) {
      const index = this.activeQA.indexOf(i)

      if (index > -1) {
        this.activeQA.splice(index, 1)
      } else {
        this.activeQA.push(i)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.question-answer {
  width: 950px;

  .item {
    margin-bottom: 12px;

    .question {
      display: flex;
      align-items: center;
      padding: 23px 46px;
      cursor: pointer;
      background-color: #fbfbfb;
      border-radius: $rMiddle;

      .title {
        flex: 1;
        font-size: 24px;
        color: rgba(0, 73, 62, 0.7);
      }
    }

    .answer {
      margin: 12px 50px;
      overflow: hidden;
      font-size: $sSmall;
      color: rgba(33, 40, 39, 0.7);
      transition: 0.5s;
    }
  }
}
</style>
